<template>
	<view>
		<form @submit="formSubmit">
			<view class="cu-form-group">
				<view class="title">车牌号码</view>
				<input placeholder="请输入车牌号码" name="registrationNO"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">我的手机号码</view>
				<input placeholder="请输入手机号码" name="phone"></input>
			</view>
			<view class="cu-form-group align-start">
				<textarea maxlength="-1" name="content" :disabled="modalName!=null" placeholder="我有话想说"></textarea>
			</view>
			<view class="cu-form-group" style="border-top:0.5px solid #FFFFFF;">
				<view class="grid col-5 flex-sub">
					<view class="padding-xs bg-img" :style="[{backgroundImage:'url(' + imgList[index] +')'}]" v-for="(item,index) in imgList"
					 :key="index" @tap="ViewImage" :data-url="imgList[index]">
						<view class="close" @tap.stop="DelImg" :data-index="index">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view @tap="upload" v-if="imgList.length<4">
						<image class="camera" src="../../static/icon_add.png" />
					</view>
				</view>
			</view>
			<view class="cu-form-group">
				<view class="title">服务评分</view>
				<uni-rate @change="onChange" class="rate" :value="5" :margin="5"></uni-rate>
			</view>
			<view class="uni-common-mt">
				<button class="button" formType="submit">提交</button>
			</view>
		</form>
	</view>
</template>

<script>
	import uniRate from '../../components/uni-rate/uni-rate.vue';
	import graceChecker from '../../common/graceChecker.js';
	import http from '../../common/http.js';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			uniRate
		},
		computed: {
			...mapState(['isLogin', 'userInfo']),
		},
		data() {
			return {
				index: -1,
				imgList: [],
				score: 5,
				modalName: null,
			};
		},
		onShow() {
			this.checkLogin();
		},
		methods: {
			checkLogin: function(e) {
				if (!this.isLogin) {
					uni.showModal({
						title: '提示',
						content: '您还未登录，请您先登录后再进行反馈意见',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/login/index'
								});
							} else if (res.cancel) {
								uni.navigateBack({
									delta: 1
								});
							}
						}
					});
				}
			},
			upload: function() {
				let _self = this;
				uni.chooseImage({
					count: 4 - _self.imgList.length,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						let tempFilePaths = res.tempFilePaths;
						for (let i in tempFilePaths) {
							http.fileUpload('/app/api/qrcode/evaluate/uploadFile/0', tempFilePaths[i], {}, function(res) {
								let result = JSON.parse(res);
								if (result.data) {
									uni.showToast({
										title: '图片上传成功',
										icon: "none"
									});
									_self.imgList = _self.imgList.concat(result.data);
								} else {
									uni.showToast({
										title: '图片上传失败',
										icon: "none"
									});
								}
							});
						}
					},
				});
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg: function(e) {
				let index = e.currentTarget.dataset.index;
				let arr = this.imgList;
				arr.splice(index, 1);
				this.imgList = arr;
			},
			onChange(e) {
				this.score = e.value;
			},
			formSubmit: function(e) {
				let _self = this;
				//定义表单规则
				var rule = [{
						name: "registrationNO",
						checkType: "vehicle",
						checkRule: "7",
						errorMsg: "车牌号码为空或者格式不正确"
					},
					{
						name: "phone",
						checkType: "phoneno",
						checkRule: "11",
						errorMsg: "手机号码为空或者格式不正确"
					},
				];
				//进行表单检查
				var formData = e.detail.value;
				var checkRes = graceChecker.check(formData, rule);
				if (!checkRes) {
					uni.showToast({
						title: graceChecker.error,
						icon: "none"
					});
					return false;
				}
				let imgList = this.imgList
				if (imgList.length == 0) {
					uni.showToast({
						title: "请上传图片",
						icon: "none"
					});
					return false;
				}
				formData.image_url = imgList.join(',');
				formData.score = _self.score;
				formData.workUnitID = 0;
				http.post('/app/api/qrcode/evaluate/add', formData, function(res) {
					if (res.code == 0 && res.data) {
						uni.showToast({
							title: "提交成功",
							icon: "none"
						});
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							});
						}, 1500)
					} else {
						uni.showToast({
							title: res.data || '评论内容不能为空',
							icon: "none"
						});
					}
				});
			},
		},
	}
</script>

<style>
	.button {
		width: 90%;
		background-color: #007AFF;
		color: #FFFFFF;
	}

	.cu-form-group .title {
		min-width: calc(4em + 15px);
		width: 110px;
	}

	.camera {
		height: 70px;
		width: 120px;
	}
		
	.bg-img {
		width: 75px;
		height:70px;
		margin-right: 10px;
	}

	.rate {
		position: absolute;
		right: 140px;
		line-height: 1.8em;
	}

	.close {
		background: #DD514C;
		color: #FFFFFF;
		display: inline;
		text-align: center;
	}
</style>
